import { Button, Popconfirm, Switch, Tooltip } from 'antd';
import pageStyles from '@/common/pageLayout.less';
import { EditOutlined, EyeOutlined, ApartmentOutlined, ReloadOutlined, ExclamationCircleOutlined, GoldOutlined } from '@ant-design/icons';
import { IUserColumnsOpt } from '../type';
import MyIcon from '@/components/MyIcon';
import { Fragment } from 'react';

const Operation = (permissions: Record<string, any>, clickFnc: IUserColumnsOpt, record?: Record<string, any>) => {
  let operationArray: any = [];

  const Edit = record?.id && record?.isOpen == 1 && permissions['/userController/edit'] && (
    <Fragment key={record?.id + 'EditOutlinedUser'}>
      <Button
        className="manageBtntTxtStyle"
        onClick={(e) => {
          e?.stopPropagation();
          clickFnc?.onEditAdd(record);
        }}
        type={'link'}
        size={'small'}
        icon={<EditOutlined />}
      >
        编辑
      </Button>
    </Fragment>
  );

  const Grant = record?.id && record?.isOpen == 1 && permissions['/userController/batchAllotPosition'] && (
    <Fragment key={record?.id + 'ApartmentOutlinedUser'}>
      <Button
        className="manageBtntTxtStyle"
        onClick={(e) => {
          e?.stopPropagation();
          clickFnc?.setPositionFunc(record);
        }}
        type={'link'}
        size={'small'}
        icon={<ApartmentOutlined />}
      >
        岗位
      </Button>
    </Fragment>
  );

  const View = record?.id && permissions['/userController/getUserByID/{id}'] && (
    <Fragment key={record?.id + 'EyeOutlinedUser'}>
      <Button
        className="manageBtntTxtStyle"
        onClick={(e) => {
          // clickFnc?.openViewInfo(record);
          e?.stopPropagation();
          clickFnc?.seeDetailView(record);
        }}
        type={'link'}
        size={'small'}
        icon={<EyeOutlined />}
      >
        查看
      </Button>
    </Fragment>
  );

  // 重置密码
  const setPwo = record?.id && record?.isOpen == 1 && permissions['/userController/resetPwd'] && (
    <Fragment key={record?.id + 'ReloadOutlinedUser'}>
      <Popconfirm
        title={
          <>
            <a style={{ marginRight: 5 }}>
              <ExclamationCircleOutlined />
            </a>
            确认要重置该用户密码吗？
          </>
        }
        onConfirm={(e) => {
          e?.stopPropagation();
          clickFnc?.reloadUserPwo(record);
        }}
        onCancel={(e) => {
          e?.stopPropagation();
        }}
        icon={<></>}
      >
        <Button
          className="manageBtntTxtStyle"
          type={'link'}
          size={'small'}
          onClick={(e) => {
            e?.stopPropagation();
          }}
          icon={<ReloadOutlined />}
        >
          重置密码
        </Button>
      </Popconfirm>
    </Fragment>
  );

  const role: any = record?.id &&
    record?.isOpen == 1 &&
    // permissions['/positionController/grant'] && (
    permissions['/userController/grant'] && (
      <Fragment key={record?.id + 'posGrant'}>
        <Tooltip title="为岗位设置角色资源权限">
          <Button
            className="manageBtntTxtStyle"
            onClick={() => {
              clickFnc?.onPosOption(record);
            }}
            type={'link'}
            size={'small'}
            icon={<GoldOutlined />}
          >
            授权
          </Button>
        </Tooltip>
      </Fragment>
    );

  operationArray = [View, Edit, role, Grant, setPwo];
  return operationArray;
};

const getUserTableColumns: any = (permissions: Record<string, any>, clickFnc: IUserColumnsOpt) => {
  return [
    {
      title: '登录名',
      dataIndex: 'name',
      key: 'name',
      width: 120,
      fixed: 'left',
      ellipsis: {
        showTitle: true,
      },
      visible: true,
      unDrag: true,
      sorter: (a: any, b: any) => {
        if (a.name < b.name) {
          return -1;
        } else {
          return 1;
        }
      },
      render: (text: string) => {
        return (
          <Tooltip title={text}>
            <div className={pageStyles['over-flow-hidden']}>
              {/* <UserOutlined /> */}
              <span>
                <MyIcon type="icon-lianxiren" />
                &nbsp;{text}
              </span>
            </div>
          </Tooltip>
        );
      },
    },
    {
      title: '姓名',
      dataIndex: 'realName',
      key: 'realName',
      width: 110,
      visible: true,
      sorter: (a: any, b: any) => {
        if (a.realName < b.realName) {
          return -1;
        } else {
          return 1;
        }
      },
      render: (text: string) => {
        return (
          <Tooltip title={text}>
            <div className={pageStyles['over-flow-hidden']}>{text || '--'}</div>
          </Tooltip>
        );
      },
    },
    {
      title: '性别',
      dataIndex: 'sex',
      key: 'sex',
      width: 80,
      visible: true,
      sorter: (a: any, b: any) => {
        if (a.sex < b.sex) {
          return -1;
        } else {
          return 1;
        }
      },
      render: (text: string) => {
        return <div className={pageStyles['over-flow-hidden']}>{text == '0' ? '未知' : text == '1' ? '男' : text == '2' ? '女' : '--'}</div>;
      },
    },

    {
      title: '所属部门',
      dataIndex: 'userDepartmentName',
      key: 'userDepartmentName',
      width: 200,
      visible: true,
      sorter: (a: any, b: any) => {
        if (a.userDepartmentName < b.userDepartmentName) {
          return -1;
        } else {
          return 1;
        }
      },
      render: (text: string) => {
        return (
          <Tooltip title={text}>
            <div className={pageStyles['over-flow-hidden']}>{text || '--'}</div>
          </Tooltip>
        );
      },
    },
    {
      title: '所属岗位',
      dataIndex: 'userPositionName',
      key: 'userPositionName',
      width: 200,
      visible: true,
      sorter: (a: any, b: any) => {
        if (a.userPositionName < b.userPositionName) {
          return -1;
        } else {
          return 1;
        }
      },
      render: (text: string) => {
        return (
          <Tooltip title={text}>
            <div className={pageStyles['over-flow-hidden']}>{text || '--'}</div>
          </Tooltip>
        );
      },
    },
    {
      title: '所属角色',
      dataIndex: 'roleNames',
      key: 'roleNames',
      width: 200,
      visible: true,
      render: (text: string) => {
        return (
          <Tooltip title={text}>
            <div className={pageStyles['over-flow-hidden']}>{text || '--'}</div>
          </Tooltip>
        );
      },
    },
    {
      title: '手机号',
      dataIndex: 'phoneMobile',
      key: 'phoneMobile',
      width: 120,
      visible: true,
      render: (text: string) => {
        return (
          <Tooltip title={text}>
            <div className={pageStyles['over-flow-hidden']}>{text || '--'}</div>
          </Tooltip>
        );
      },
    },
    {
      title: '邮箱',
      dataIndex: 'emailNum',
      key: 'emailNum',
      width: 120,
      visible: false,
      sorter: (a: any, b: any) => {
        if (a.emailNum < b.emailNum) {
          return -1;
        } else {
          return 1;
        }
      },
      render: (text: string) => {
        return (
          <Tooltip title={text}>
            <div className={pageStyles['over-flow-hidden']}>{text || '--'}</div>
          </Tooltip>
        );
      },
    },
    {
      title: '状态',
      dataIndex: 'isOpen',
      key: 'isOpen',
      width: 100,
      visible: true,
      sorter: (a: any, b: any) => {
        if (a.isOpen < b.isOpen) {
          return -1;
        } else {
          return 1;
        }
      },
      render: (text: string, record: Record<string, any>) => {
        return (
          <>
            <Switch
              checkedChildren="启用"
              unCheckedChildren="禁用"
              checked={text == '1' ? true : false}
              onChange={(checked: boolean, e: any) => {
                e?.stopPropagation();
                clickFnc?.onChangeIsOpen(checked, record);
              }}
              disabled={!permissions['/userController/modifyState']}
            />
          </>
        );
      },
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      width: 190,
      visible: true,
      sorter: (a: any, b: any) => {
        if (a.createTime < b.createTime) {
          return -1;
        } else {
          return 1;
        }
      },
      render: (text: string) => {
        return (
          <Tooltip title={text}>
            <div className={pageStyles['over-flow-hidden']}>{text || '--'}</div>
          </Tooltip>
        );
      },
    },
    {
      title: '排序',
      dataIndex: 'seq',
      key: 'seq',
      width: 80,
      visible: true,
      sorter: (a: any, b: any) => {
        if (a.seq < b.seq) {
          return -1;
        } else {
          return 1;
        }
      },
      render: (text: string) => {
        return (
          <>
            {/* <Tooltip title={text}> */}
            <div className={pageStyles['over-flow-hidden']}>{text || '0'}</div>
            {/* </Tooltip> */}
          </>
        );
      },
    },
    {
      title: '办公电话',
      dataIndex: 'phoneOffice',
      key: 'phoneOffice',
      width: 120,
      visible: false,
      render: (text: string) => {
        return (
          <Tooltip title={text}>
            <div className={pageStyles['over-flow-hidden']}>{text || '--'}</div>
          </Tooltip>
        );
      },
    },
    {
      title: '工号',
      dataIndex: 'workNum',
      key: 'workNum',
      width: 110,
      visible: false,
      sorter: (a: any, b: any) => {
        if (a.workNum < b.workNum) {
          return -1;
        } else {
          return 1;
        }
      },
      render: (text: string) => {
        return (
          <Tooltip title={text}>
            <div className={pageStyles['over-flow-hidden']}>{text || '--'}</div>
          </Tooltip>
        );
      },
    },
    {
      title: '用户类型',
      dataIndex: 'userType',
      key: 'userType',
      width: 120,
      visible: false,
      sorter: (a: any, b: any) => {
        if (a.userType < b.userType) {
          return -1;
        } else {
          return 1;
        }
      },
      render: (text: string) => {
        return (
          <Tooltip title={text}>
            <div className={pageStyles['over-flow-hidden']}>{text == '0' ? '系统用户' : text == '1' ? '应用用户' : '--'}</div>
          </Tooltip>
        );
      },
    },
    {
      title: '分机号',
      dataIndex: 'extNum',
      key: 'extNum',
      width: 110,
      visible: false,
      render: (text: string) => {
        return (
          <Tooltip title={text}>
            <div className={pageStyles['over-flow-hidden']}>{text || '--'}</div>
          </Tooltip>
        );
      },
    },
    {
      title: 'QQ号',
      dataIndex: 'qqNum',
      key: 'qqNum',
      width: 110,
      visible: false,
      render: (text: string) => {
        return (
          <Tooltip title={text}>
            <div className={pageStyles['over-flow-hidden']}>{text || '--'}</div>
          </Tooltip>
        );
      },
    },
    {
      title: '微信号',
      dataIndex: 'wechatNum',
      key: 'wechatNum',
      width: 110,
      visible: false,
      render: (text: string) => {
        return (
          <Tooltip title={text}>
            <div className={pageStyles['over-flow-hidden']}>{text || '--'}</div>
          </Tooltip>
        );
      },
    },
    {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
      width: 200,
      visible: false,
      sorter: (a: any, b: any) => {
        if (a.address < b.address) {
          return -1;
        } else {
          return 1;
        }
      },
      render: (text: string) => {
        return (
          <Tooltip title={text}>
            <div className={pageStyles['over-flow-hidden']}>{text || '--'}</div>
          </Tooltip>
        );
      },
    },
    {
      title: '邮编',
      dataIndex: 'zipcode',
      key: 'zipcode',
      width: 110,
      visible: false,
      sorter: (a: any, b: any) => {
        if (a.zipcode < b.zipcode) {
          return -1;
        } else {
          return 1;
        }
      },
      render: (text: string) => {
        return (
          <Tooltip title={text}>
            <div className={pageStyles['over-flow-hidden']}>{text || '--'}</div>
          </Tooltip>
        );
      },
    },
    {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',
      width: 200,
      visible: false,
      render: (text: string) => {
        return (
          <Tooltip title={text}>
            <div className={pageStyles['over-flow-hidden']}>{text || '--'}</div>
          </Tooltip>
        );
      },
    },
    {
      title: '操作',
      dataIndex: 'option',
      width: 360,
      key: 'option',
      fixed: 'right',
      visible: true,
      unDrag: true,
      render: (_: string, record: Record<string, any>) => {
        return (
          <div
            style={{
              display: 'flex',
            }}
          >
            {Operation(permissions, clickFnc, record)}
          </div>
        );
      },
    },
  ];
};
export { getUserTableColumns };
